<?php
$exception = $e;
function get_code2($file, $line, $sline = 10)
{
    $file = file($file);
    if ($line - 10 > 0) {
        $start = $line - 10;
    } else {
        $start = 0;
    }

    if (count($file) < $line + $sline) {
        $end = count($file);
    } else {
        $end = $line + $sline;
    }

    $content = '';
    for ($i = $start; $i <= $end; $i++) {
        $content .= $file[$i - 1];
    }
    return [$content, $start];
}

?>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>500 Error</title>
    <!--    <link href="https://cdn.bootcss.com/prettify/r298/prettify.css" rel="stylesheet">-->
</head>
<body>
<style>
    .pln {
        color: #000
    }

    @media screen {
        .str {
            color: #080
        }

        .kwd {
            color: #008
        }

        .com {
            color: #800
        }

        .typ {
            color: #606
        }

        .lit {
            color: #066
        }

        .pun, .opn, .clo {
            color: #660
        }

        .tag {
            color: #008
        }

        .atn {
            color: #606
        }

        .atv {
            color: #080
        }

        .dec, .var {
            color: #606
        }

        .fun {
            color: red
        }
    }

    @media print, projection {
        .str {
            color: #060
        }

        .kwd {
            color: #006;
            font-weight: bold
        }

        .com {
            color: #600;
            font-style: italic
        }

        .typ {
            color: #404;
            font-weight: bold
        }

        .lit {
            color: #044
        }

        .pun, .opn, .clo {
            color: #440
        }

        .tag {
            color: #006;
            font-weight: bold
        }

        .atn {
            color: #404
        }

        .atv {
            color: #060
        }
    }

    pre.prettyprint {
        padding: 2px;
        border: 1px solid #888
    }

    ol.linenums {
        margin-top: 0;
        margin-bottom: 0;
        padding: 0 55px;
    }

    html, div, body {
        margin: 0;
        padding: 0;
        background: #E5F2B1;
    }

    .infoblock {
        width: 100%;
        min-height: 200px;
        background: #E5F2B1;
        margin: 0 auto;
    }

    .infoblock .msg {
        padding: 20px;
    }

    .infoblock .msg h1 {
        color: #ee716e;
    }

    .infoblock .msg h3 {
        margin-left: 20px;
    }

    .infoblock .msg .file {
        margin-left: 20px;
    }

    .infoblock pre {
        width: 96%;
        margin: 0 auto;
    }

    pre.prettyprint, code.prettyprint {
        font-family: "Inconsolata", "Fira Mono", "Source Code Pro", Monaco, Consolas, "Lucida Console", monospace; /*background: #333;*/
        color: #e9e4e5;
    }

    pre.prettyprint {
        white-space: pre-wrap;
    }

    pre.prettyprint a, code.prettyprint a {
        text-decoration: none;
    }

    .linenums li {
        color: #A5A5A5;
    }

    .code-block {
        background: #eee;
    }

    .linenums li {
        list-style-type：decimal;
    }

    .linenums li.current {
        background: rgba(255, 100, 100, .07);
        padding-top: 4px;
        padding-left: 1px;
    }

    .linenums li.current.active {
        background: rgba(255, 100, 100, .17);
    }

    .codebox .rightlist {

        width: 21%;
        float: left;
        margin: 0;
        border-right: none;
        border-left: none;
        height: 530px;
        overflow: hidden;
        overflow-y: auto;
    }

    .codebox {
        height: 560px;
    }

    .codebox .rightlist li {
        width: 86.1%;
        padding: 15px 15px;
        background: #fff;
    }

    .codebox .rightlist li:first-child {
    }

    .tab {
        width: 70.5%;
        float: left;
        padding: 10px 15px;
        margin-bottom: 40px;
    }

    .codebox {
        margin: 20px auto;
    }

    .codebox .rightlist ul {
        list-style: none;
        margin: 0;
    }

    .codebox .rightlist li a {
        font-size: 20px;
        font-weight: bold;
        color: #828282;
        display: block;
    }

    .codebox .rightlist li.active {
        background: rgba(192, 236, 199, 0.66);
    }

    .tab, .tabs, .code {
        background: rgba(192, 236, 199, 0.66);
    }

    .codebox .tabs {
        min-height: 530px;
        display: none;
    }

    .codebox .content div.active {
        display: block;
    }
</style>
<script src="https://cdn.bootcss.com/prettify/r298/prettify.js"></script>
<div class="infoblock">
    <div class="msg">
        <h1><?php echo get_class($exception); ?></h1>
        <h3><?php echo $exception->getMessage(); ?></h3>
        <div class="file">
            <?php echo $exception->getFile(); ?><span
                    class="line">&nbsp;&nbsp;&nbsp;&nbsp;(line: <?php echo $exception->getLine(); ?></span>)
        </div>
    </div>
    <?php $code = get_code2($exception->getFile(), $exception->getLine());
    $content = $code[0];
    $line = $code[1]; ?>
    <pre class="code0 code-block prettyprint linenums:<?php echo $line; ?>"
         data-lines="<?php echo $exception->getLine(); ?>">
        <?php echo $content; ?>
    </pre>
</div>
<script>
    addEventListener('load', function () {
        var highlightCurrentLine = function() {
            // Highlight the active and neighboring lines for this frame:
            var activeLineNumber = +(document.querySelector('.code0').getAttribute('data-lines'));
            var $lines           = document.querySelectorAll('.linenums li');
            var firstLine        = +($lines[0].value);
            $lines[activeLineNumber - firstLine - 1].className += ' current';
            $lines[activeLineNumber - firstLine].className += ' current active';
            $lines[activeLineNumber - firstLine + 1].className += ' current';
        }
        prettyPrint();
        highlightCurrentLine();
    }, false);

</script>
<script>
    function s2(num) {
        // Highlight the active and neighboring lines for this frame:
        var base = document.querySelector('.code' + num);
        var activeLineNumber = +(base.getAttribute('data-lines'));
        var $lines           = document.querySelector('.code' + num).querySelectorAll('li');
        if ($lines.length > 0) {
            var firstLine = +($lines[0].value);
            $lines[activeLineNumber - firstLine - 1].className += ' current';
            $lines[activeLineNumber - firstLine].className += ' current active';
            $lines[activeLineNumber - firstLine + 1].className += ' current';
        }
    }

</script>
<div class="codebox">
    <div class="rightlist">
        <ul>
            <?php $edata = $exception->getTrace();
            array_shift($edata);
            foreach ($edata as $key => $item): ?>
                <li class="<?php if ($key === 0): echo 'active'; endif; ?>" data-id="tab<?php echo $key + 1; ?>">
                    <a><?php echo !empty($item['class']) ? $item['class'] . '::' : ''; ?><?php echo $item['function']; ?></a>
                </li>
            <?php endforeach; ?>
        </ul>
    </div>
    <div class="tab">
        <?php foreach ($edata as $key => $item): ?>
            <div class="tabs" style="<?php if ($key === 0): ?> display: block; <?php endif; ?>"
                 id="tab<?php echo $key + 1; ?>">
                <div class="code">
                    <div class="file">
                        <h1>File</h1>
                        <h3><?php echo $item['file']; ?> ( <?php echo $item['line']; ?> )</h3>
                    </div>
                    <div class="code">
                        <?php $temp = get_code2($item['file'], $item['line']); ?>
                        <pre class="code<?php echo $key + 1; ?> code-block prettyprint linenums:<?php echo $temp[1]; ?>"
                             data-lines="<?php echo $item['line']; ?>">
                        <?php echo $temp[0]; ?>
                    </pre>
                        <script>
                        addEventListener('load', function () {
                            s2(<?php echo $key + 1; ?>);

                        })

                        </script>
                    </div>
                    <div class="args"></div>
                </div>
            </div>
        <?php endforeach; ?>
    </div>
</div>
<script>
    window.onload = function () {
        data = document.querySelectorAll('.rightlist li');
        data.forEach(function (i) {
            i.addEventListener('click', function () {
                var temp1 = i.attributes['data-id'].nodeValue;
                // temp1 = temp1.split('=')[1];
               var temp2 = document.querySelectorAll('.rightlist li');
               temp2.forEach(function (i3) {
                   i3.className = ''
               });
               this.className = 'active';

                document.querySelectorAll('.tabs').forEach(function (i2) {
                    i2.style = '';
                })

                document.querySelector('#' + temp1).style.display = 'block';

            })
        })
    }

</script>
</body>
</html>